<template>
  <div id="app">
    <h1 ref="hello" id="hello">{{ message }}</h1>
    <button @click="changeMsg">change</button>
  </div>
</template>

<script>
// beforeCreate --- 创建前
// created --- 创建完成
// beforeCreate是new Vue()之后触发的第一个钩子，一个组件生命的开始，当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
// created阶段实例已经创建完成，已经完成了数据观测， 可以使用数据，更改数据，在这里更改数据不会触发updated函数。

// beforeMount --- 挂载前
// mounted --- 挂载完成
// beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
// mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。


// beforeUpdate --- 更新前
// updated --- 更新完成
// beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
// updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

// beforeDestroy --- 销毁前
// destroyed --- 销毁完成
// beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器，可能导致内存泄漏，变量污染的一些变量，方法等
// destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也被销毁。

// 如果使用组件的keep-alive功能时，增加两个周期：
// activated在keep-alive组件激活时调用；
// deactivated在keep-alive组件停用时调用。
// <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。
// 当在<keep-alive>内切换组件时，它的activated和deactivated这两个生命周期钩子函数将会执行。
export default {
  name: "Life",
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    changeMsg() {
      this.message += 's'
    }
  },
  beforeCreate: function () {
    console.group('------beforeCreat 创建前------');
    console.log("%c%s", "color: green", "data   : " + this.$data);
    console.log("%c%s", "color: green", "message: " + this.message);
  },
  created: function () {
    console.group('------created 创建完成------');
    console.log("%c%s", "color: green", "data   : " + this.$data);
    console.log("%c%s", "color: green", "message: " + this.message);
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  beforeMount: function () {
    console.group('------beforeMount 挂载前------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  mounted: function () {
    console.group('------mounted 挂载完成------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data);
    console.log("%c%s", "color:green", "message: " + this.message);
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  beforeUpdate: function () {
    console.group('------beforeUpdate 更新前------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  updated: function () {
    console.group('------updated 更新完成------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data);
    console.log("%c%s", "color:green", "message: " + this.message);
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  beforeDestroy: function () {
    console.group('------beforeDestroy 销毁前------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
  destroyed: function () {
    console.group('------destroyed 销毁完成------');
    console.log(this.$el);
    console.log("%c%s", "color:green", "data   : " + this.$data);
    console.log("%c%s", "color:green", "message: " + this.message);
    let hello = document.getElementById('hello')
    console.log('hello:', hello)
  },
}
</script>

<style scoped>

</style>
